<template>
  <view class="container">
    <scroll-view scroll-y>
      <view class="search-box">
        <input
          focus
          type="text"
          class="iconfont search-text"
          placeholder-class="iconfont icon-search"
          placeholder=" 搜索任务名称"
          v-model="searchText"
          @input="inputChange"
        />
      </view>

      <view class="content">
        <!-- 任务列表 -->
        <view class="task-box">
          <view
            class="task-item"
            v-for="item in searchList"
            :key="item.uuid"
            @click.stop="checkTask(item.uuid)"
          >
            <!-- 任务名称 -->
            <view class="item-center">
              <text>{{ item.w_name }}</text>
              <text>{{ item.w_label }}</text>
            </view>
            <!-- 任务时间 -->
            <view class="item-right">
              <text class="task-time">
                {{ item.w_remind | formatDate("MM-dd hh:mm") }}
              </text>
            </view>
          </view>
        </view>

        <view v-if="searchList.length <= 0" class="bg-box">
          <image
            src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-9d57514b-4404-46e1-9760-8991b85dbc25/7aa88c00-3587-4887-84f0-38d0d7dc3afc.png"
            mode="widthFix"
          />
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
const { getWorkByWName } = require("../../api/home/search");
const { debounce } = require("../../utils/utils");

export default {
  props: {},
  components: {},
  data() {
    return {
      searchText: "",
      searchList: [],
    };
  },
  computed: {},
  watch: {},
  methods: {
    inputChange() {
      this.getWorkByWName();
    },
    // 搜索任务
    getWorkByWName: debounce(function () {
      let params = {
        code: uni.getStorageSync("openId"),
        w_name: this.searchText.trim(),
      };
      getWorkByWName(params).then(
        res => {
          this.searchList = res ? res : [];
          if (this.searchList.length == 0)
            uni.showToast({ title: "没有这个任务!", icon: "none" });
        },
        err => {
          uni.showToast({ title: err, icon: "none" });
        }
      );
    }, 350),
    // 查看任务
    checkTask(uuid) {
      if (uuid == "") return;
      uni.navigateTo({
        url: "../addtask/addtask?uuid=" + uuid,
      });
    },
  },
  created() {},
  mounted() {},
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #fff;

  // 搜索框
  .search-box {
    height: 8%;
    padding: 10rpx 30rpx;

    .search-text {
      width: 100%;
      height: 72rpx;
      padding-left: 20rpx;
      line-height: 72rpx;
      background-color: #f2f2f2;
      border-radius: 8rpx;
      // text-align: center;
    }
  }

  .content {
    height: 92%;

    // 任务列表
    .task-box {
      padding: 0 30rpx;

      .task-item {
        display: flex;
        position: relative;
        margin-bottom: 20rpx;
        padding: 30rpx 20rpx 30rpx 0;
        background-color: #fff;

        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 12rpx;
          height: 40rpx;
          background-color: #666ee8;
        }

        .item-center {
          flex: 1;
          display: flex;
          margin-left: 10rpx;
          padding: 0 20rpx;
          flex-direction: column;
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 500;

          & text:first-child {
            color: #333333;
          }

          & text:last-child {
            font-size: 24rpx;
            color: #cccccc;
          }
        }

        .item-right {
          width: 200rpx;
          position: relative;

          .task-time {
            position: absolute;
            top: 0;
            right: 0;
            height: 48rpx;
            padding: 8rpx 20rpx;
            line-height: 32rpx;
            background-color: #f2f2f2;
            border-radius: 24rpx;
            text-align: center;
            font-size: 24rpx;
            color: #333333;
          }
        }
      }
    }

    // 背景图片
    .bg-box {
      width: 100%;

      image {
        width: 100%;
        padding: 60rpx;
        padding-bottom: 0;
      }
    }
  }
}
</style>
